<template>
    <div class="container">
        <h1>Axios 示例</h1>
        <!-- 点击按钮获取数据 -->
        <div style="background-color: azure;">
            <label>输入名字：</label>
            <input v-model="fetchName" />
            <button @click="fetchData">获取数据</button>
        </div>
        <!-- 点击按钮发送数据 -->
        <div style="background-color: bisque;">
            <label>输入名字：</label>
            <input v-model="sendName" />
            <label>输入信息：</label>
            <input v-model="sendMessage" />
            <button @click="sendData">发送数据</button>
        </div>
        <!-- 如果有响应数据，则显示 -->
        <!-- 如果有响应数据，则显示 -->
        <div v-if="responseData">
            <p>姓名：{{ responseData.name }}</p>
            <p>信息：{{ responseData.message }}</p>
        </div>
        <div v-else>
            无数据
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'; // 从 Vue 导入 ref 函数，用于创建响应式数据
//要导入axios，需要在终端输入npm install axios安装axios包
import axios from 'axios'; // 导入 Axios 库，用于处理 HTTP 请求

// 创建一个响应式变量，用于存储响应数据
const fetchName = ref(''); //搜索名字
const sendName = ref(''); //新增名字
const sendMessage = ref(''); //新增信息
const responseData = ref(null); //返回的数据


// 获取数据的函数
const fetchData = () => {
    // 定义要发送的数据
    const data = { name: fetchName.value };
    // 使用 Axios 发送 GET 请求
    axios.get('http://8.134.222.232:3080/students/getMessage',
        { params: data } //这里使用params是get特有的规则
    )
        // then 用途: 用于处理 Promise 成功的结果。
        .then(response => {
            // 如果请求成功，将响应数据赋值给 responseData
            responseData.value = response.data;
        })
        //catch 用途: 用于处理 Promise 失败的结果。
        .catch(error => {
            // 如果请求失败，打印错误信息
            alert(error)
        });
};

// 发送数据的函数
const sendData = () => {
    // 定义要发送的数据
    const data = { name: sendName.value, message: sendMessage.value };

    // 使用 Axios 发送 POST 请求
    axios.post('http://8.134.222.232:3080/students/postMessage', data)
        .then(response => {
            // 如果请求成功，将响应数据赋值给 responseData
            responseData.value = response.data;
        })
        .catch(error => {
            // 如果请求失败，打印错误信息
            alert(error);
        });
};
</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(187, 187, 187);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
</style>